<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    
    <h:head>
        <title>Sửa thông tin người dùng</title>
        <style type="text/css">
                .ui-widget {
                    font-family: Tahoma;
                    font-size: 11px;
                }
        </style>
    </h:head>  
    <h:body>
        <h:outputStylesheet library="css" name="component.css"/>
        <f:metadata>
            <f:viewParam id="userId" name="userId" value="#{userBean.userId}" required="true" requiredMessage="Người dùng không tồn tại"/>
            <f:event type="preRenderView" listener="#{userBean.preRenderEditView()}" />
        </f:metadata>
        <h:form id="mainForm">
            <p:scrollPanel style="height:500px" rendered="#{userBean.user != null}">
                <p:messages id="msgs"/>
                <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                    <p:toolbarGroup align="left">  
                        <p:commandButton value="Lưu" actionListener="#{userBean.updateAction()}" update=":mainForm"/>
                        <p:commandButton type="reset" value="Nhập lại"/>
                    </p:toolbarGroup>
                </p:toolbar>
                
                <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content, ui-state-default labelCol, ui-widget-content" 
                             columns="4" cellpadding="5" width="100%">
                    <h:outputLabel for="username" style="display: inline; float: right; padding-right: 5px;" value="Tên đăng nhập *" />  
                    <p:inputText value="#{userBean.user.username}" id="username" required="true" label="Tên đăng nhập" maxlength="50"
                                 requiredMessage="Yêu cầu nhập tên đăng nhập"/>
                    
                    <h:outputLabel for="password" style="display: inline; float: right; padding-right: 5px;" value="Mật khẩu *" />  
                    <p:password value="#{userBean.user.password}" id="password" required="true" label="Mật khẩu" maxlength="30" redisplay="true"
                                 requiredMessage="Yêu cầu nhập mật khẩu"/>
                    
                    <h:outputLabel for="fullName" style="display: inline; float: right; padding-right: 5px;" value="Tên đầy đủ" />  
                    <p:inputText value="#{userBean.user.fullName}" id="fullName" label="Tên đầy đủ" maxlength="100"/>
                    
                    <h:outputLabel for="activated" style="display: inline; float: right; padding-right: 5px;" value="Kích hoạt" />  
                    <p:selectBooleanCheckbox value="#{userBean.user.activated}" id="activated" label="Kích hoạt"/>
                    
                    <h:outputLabel for="dept" style="display: inline; float: right; padding-right: 5px;" value="Phòng ban" />
                    <p:selectOneMenu id="dept" value="#{userBean.user.dept}" effect="fade" converter="deptConverter">
                        <f:selectItem itemLabel="" itemValue="" />  
                        <f:selectItems value="#{userBean.deptList}" var="dept" itemLabel="#{dept.name}" itemValue="#{dept}"/>
                    </p:selectOneMenu>
                    
                    <h:outputLabel for="title" style="display: inline; float: right; padding-right: 5px;" value="Chức danh" />  
                    <p:inputText value="#{userBean.user.title}" id="title" label="Chức danh" maxlength="100"/>
                    
                    <h:outputLabel for="address" style="display: inline; float: right; padding-right: 5px;" value="Địa chỉ" />  
                    <h:panelGroup>
                        <p:inputTextarea id="address" counter="counter" counterTemplate="Còn lại {0} ký tự." maxlength="200" 
                                         value="#{userBean.user.address}"/>
                        <h:outputText id="counter" />
                    </h:panelGroup>
                    
                    <h:outputLabel for="email" style="display: inline; float: right; padding-right: 5px;" value="Email" />  
                    <p:inputText value="#{userBean.user.email}" id="email" label="Email" maxlength="100"/>
                    
                    <h:outputLabel for="phone" style="display: inline; float: right; padding-right: 5px;" value="Số điện thoại" />  
                    <p:inputText value="#{userBean.user.phone}" id="phone" label="Số điện thoại" maxlength="20"/>
                    
                    <h:outputLabel for="mobile" style="display: inline; float: right; padding-right: 5px;" value="Di động" />  
                    <p:inputText value="#{userBean.user.mobile}" id="mobile" label="Di động" maxlength="20"/>
                    
                    <h:outputLabel for="birthDate" style="display: inline; float: right; padding-right: 5px;" value="Ngày sinh" />
                    <p:calendar id="birthDate" value="#{userBean.user.birthDate}" pattern="dd/MM/yyyy"/>
                </h:panelGrid>
                
                <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content" 
                             columns="2" cellpadding="5" width="100%">
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Nhóm" />
                    <p:pickList value="#{userBean.groupModels}" var="group" itemLabel="#{group.name}" 
                                itemValue="#{group}" converter="groupConverter"
                                showSourceControls="true" showTargetControls="true">
                        <f:facet name="sourceCaption">Danh sách nhóm</f:facet>  
                        <f:facet name="targetCaption">Nhóm đã chọn</f:facet>
                    </p:pickList>
                </h:panelGrid>
                
                <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content" 
                             columns="2" cellpadding="5" width="100%">
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Role" />
                    <p:pickList value="#{userBean.roleModels}" var="role" itemLabel="#{role.name}" 
                                itemValue="#{role}" converter="roleConverter"
                                showSourceControls="true" showTargetControls="true">
                        <f:facet name="sourceCaption">Danh sách role</f:facet>  
                        <f:facet name="targetCaption">Role đã chọn</f:facet>
                    </p:pickList>
                </h:panelGrid>
            </p:scrollPanel>
        </h:form>  
    </h:body>  
</html>
